<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.min.css">

    <script src="./node_modules/swiper/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="./index.css">

    <title>Document</title>
</head>

<body>
    <div class="guang">
        <div class="center">
            <span>
                <img src="./图标/图标/关  闭.svg" alt="">
            </span>
        </div>
    </div>
    <div class="Sign">
        <div class="center">
            <div class="left">
                <img src="./图标/图标/tubaio.png" alt="">
            </div>
            <div class="right">
                <span>
                    <img src="./图标/图标/denglv.png" alt="">
                    <span class="yuans">
                    </span>
                    登录/注册
                </span>
                <span>
                    <img src="./图标/图标/gouwu.png" alt="">
                    购物车
                </span>
                <span>
                    <img src="./图标/图标/serch.png" alt="">
                    搜索
                </span>
                <span>
                    <img src="./图标/图标/wenhao3.png" alt="">
                    帮助
                </span>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="center">
            <span>首页</span>
            <span>品牌一览</span>
            <span>潮牌服饰</span>
            <span>时尚鞋履</span>
            <span>其他配饰</span>
        </div>
    </div>
    <div class="center">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./图标/图标/轮播图/轮播图.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./图标/图标/轮播图/轮播图1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./图标/图标/轮播图/轮播图2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./图标/图标/轮播图/轮播图3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->

            <div class="swiper-pagination abs"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev sw"></div>
            <div class="swiper-button-next sw"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <div class="hot">
            <div class="top">
                <span>热卖单品</span>
            </div>
            <div class="pic">
                <div class="center">
                    <div class="pics">
                        <div class="pic1">
                            <img src="./商品/商品/热卖单品/u=1494080506,506430978&fm=26&gp=0.jpg" alt="">
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/热卖单品/src=http___gw.alicdn.com_imgextra_i1_1116155218_TB2.1xbaVXXXXX2XXXXXXXXXXXX_!!1116155218.jpg&refer=http___gw.alicdn.jfif"
                                alt="">
                            <p>休闲复古牛仔夹克</p>
                            <p>￥240</p>
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/热卖单品/下载 (3).jfif" alt="">
                            <p>涂鸦印花灯芯绒翻领外套</p>
                            <p>￥231</p>
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/热卖单品/下载 (4).jfif" alt="">
                            <p>嘻哈卫衣男潮流外套</p>
                            <p>￥199</p>
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/热卖单品/下载 (5).jfif" alt="">
                            <p>美式街头拼色夹克外套</p>
                            <p>￥350</p>
                        </div>
                    </div>

                    <div class="pichot2">

                        <div class="pic3">
                            <img src="./商品/商品/热卖单品/下载 (10).jfif" alt="">
                            <p>休闲复古牛仔夹克</p>
                            <p>￥240</p>
                        </div>
                        <div class="pic4">
                            <img src="./商品/商品/热卖单品/摄图网_500959548_西服定制（非企业商用）.jpg" alt="">
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/热卖单品/下载 (7).jfif" alt="">
                            <p>涂鸦印花灯芯绒翻领外套</p>
                            <p>￥231</p>
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/热卖单品/下载 (9).jfif" alt="">
                            <p>嘻哈卫衣男潮流外套</p>
                            <p>￥199</p>
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/热卖单品/下载 (6).jfif" alt="">
                            <p>美式街头拼色夹克外套</p>
                            <p>￥350</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        <div class="hot">
            <div class="top">
                <span>新品推荐</span>
            </div>
            <div class="pic">
                <div class="center">
                    <div class="pics">
                        <div class="pic5">
                            <img src="./商品/商品/新品推荐/BADFIVE篮球系列男子防泼水宽松运动风衣 499.jpg" alt="">
                            <p>BADFIVE运动风衣</p>
                            <p>￥499</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/新品推荐/星球大战联名男子宽松套头卫衣150元.jpg" alt="">
                            <p>星球大战联名男子宽松套头卫衣</p>
                            <p>￥150</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/新品推荐/运动时尚系列男女同款套头连帽卫衣 259元.jpg" alt="">
                            <p>运动时尚系列套头连帽卫衣</p>
                            <p>￥259</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/新品推荐/男女同款宽松套头卫衣  148.jpg" alt="">
                            <p>男女同款宽松套头卫衣</p>
                            <p>￥148</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/新品推荐/运动时尚系列男子收口宽松运动长裤 179.jpg" alt="">
                            <p>运动时尚系列长裤</p>
                            <p>￥179</p>
                        </div>
                    </div>

                    <div class="pichot2">

                        <div class="pic6">
                            <img src="./商品/商品/新品推荐/运动时尚系列男子收口宽松卫裤  138.jpg" alt="">
                            <div class="pic6_bottom">
                                <p>男子收口宽松卫裤</p>
                                <p>￥179</p>
                            </div>
                        </div>
                        <div class="pic6">
                            <img src="./商品/商品/新品推荐/下载 (12).jfif" alt="">
                            <div class="pic6_bottom">
                                <p>潮牌宽松哈伦裤</p>
                                <p>￥179</p>
                            </div>
                        </div>
                        <div class="pic6">
                            <img class="xie" src="./商品/商品/新品推荐/下载 (15).jpg" alt="">
                            <div class="pic6_bottom">
                                <p>春季新款潮流帆布鞋</p>
                                <p>￥178</p>
                            </div>
                        </div>
                        <div class="pic6">
                            <img class="xie" src="./商品/商品/新品推荐/下载 (16).jpg" alt="">
                            <div class="pic6_bottom">
                                <p>奥康商务休闲皮鞋</p>
                                <p>￥256</p>
                            </div>
                        </div>
                        <div class="pic6">
                            <div class="pic6_small">
                                <img src="./商品/商品/新品推荐/下载 (18).jpg" alt="">
                            </div>
                            <div class="pic6_small">
                                <img src="./商品/商品/新品推荐/下载 (21).jfif" alt="">
                            </div>
                        </div>
                        <div class="pic6">
                            <div class="pic6_small">
                                <img src="./商品/商品/新品推荐/下载 (20).jfif" alt="">
                            </div>
                            <div class="pic6_small">
                                <img class="more" src="./图标/图标/more.png" alt="">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="hot">
            <div class="top">
                <span>潮流商场</span>
            </div>
            <div class="pic">
                <div class="center">
                    <div class="pics">
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/下载.png" alt="">
                            <p>春秋韩版百搭宽松休闲女西服</p>
                            <p>￥457</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/下载 (22).jfif" alt="">
                            <p>德国蝙蝠袖真丝女衬衫</p>
                            <p>￥321</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/下载 (25).jfif" alt="">
                            <p>日系春秋亚麻女外套</p>
                            <p>￥159</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/O1CN011i6RjD1I2TMw8toJz_!!640460835.jpg" alt="">
                            <p>复古英伦休闲女装</p>
                            <p>￥469</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/下载 (27).jfif" alt="">
                            <p>查琳英伦风秋季女外套</p>
                            <p>￥478</p>
                        </div>
                    </div>

                    <div class="pichot2">

                        <div class="pic3">
                            <div class="picr">
                                <p>潮流上装</p>
                            </div>
                            <div>
                                <ul class="left">
                                    <li>卫衣</li>
                                    <li>夹克</li>
                                    <li>风衣</li>
                                    <li>衬衫</li>
                                </ul>
                                <ul class="right">
                                    <li>T恤</li>
                                    <li>DC</li>
                                    <li>POLO</li>
                                    <li>PUMA</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pic4">
                            <img src="./商品/商品/潮流商城/src=http___img1.juimg.com_160519_330877-16051Z1323021.jpg&refer=http___img1.juimg.jfif"
                                alt="">
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/潮流商城/下载 (28).jfif" alt="">
                            <p>潮流宽松港风圆领简秋装</p>
                            <p>￥109</p>
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/潮流商城/THETHING 山脉星空定位印花卫衣  234.jpg" alt="">
                            <p>山脉星空定位印花卫衣</p>
                            <p>￥234</p>
                        </div>
                        <div class="pic2">
                            <img src="./商品/商品/潮流商城/超级玛丽圆领卫衣 229.jpg" alt="">
                            <p>超级玛丽圆领卫衣</p>
                            <p>￥229</p>
                        </div>
                    </div>

                    <div class="pichot2">
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/下载 (23).jpg" alt="">
                            <p>BADFIVE运动风衣</p>
                            <p>￥499</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/下载 (24).jfif" alt="">
                            <p>星球大战联名男子宽松套头卫衣</p>
                            <p>￥150</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/THETHING 侧袋装饰贴标束口长裤 123.jpg" alt="">
                            <p>运动时尚系列套头连帽卫衣</p>
                            <p>￥259</p>
                        </div>
                        <div class="pic5">
                            <img src="./商品/商品/潮流商城/THETHING 子母带装饰撞色长裤  221.jpg" alt="">
                            <p>男女同款宽松套头卫衣</p>
                            <p>￥148</p>
                        </div>
                        <div class="pic5">
                            <div class="pic5_small">
                                <img class="mores" src="./图标/图标/more.png" alt="">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="center">
            <div class="top">
                <span class="topmain">
                    <img src="./图标/图标/zheng.png" alt="">
                    <span class="red">100%</span>
                    品牌正品
                </span>
                <span class="topmain">
                    <img src="./图标/图标/seven.png" alt="">
                    <span class="red">7天</span>
                    无理由退货
                </span>
                <span class="topmain">
                    <img src="./图标/图标/wx.png" alt="">
                    <span class="red">便捷</span>
                    在线客服
                </span>
            </div>
            <div class="main">
                <ul>
                    <li><a href="###">新手专区</a></li>
                    <li><a href="###">注册登录</a></li>
                    <li><a href="###">购物结算</a></li>
                    <li><a href="###">下单支付</a></li>
                    <li><a href="###">收货评价</a></li>
                </ul>
                <ul>
                    <li><a href="###">会员中心</a></li>
                    <li><a href="###">会员制度</a></li>
                    <li><a href="###">会员优惠</a></li>
                    <li><a href="###">账户管理</a></li>
                    <li><a href="###">密码管理</a></li>
                </ul>
                <ul>
                    <li><a href="###">购物指南</a></li>
                    <li><a href="###">发票</a></li>
                    <li><a href="###">尺码对照</a></li>
                    <li><a href="###">尺码解读</a></li>
                    <li><a href="###">商品咨询</a></li>
                </ul>
                <ul>
                    <li><a href="###">支付方式</a></li>
                    <li><a href="###">在线支付</a></li>
                    <li><a href="###">货到付款</a></li>
                    <li><a href="###">分期支付</a></li>
                    <li><a href="###">优惠券，有货币</a></li>
                </ul>
                <ul>
                    <li><a href="###">配送方式</a></li>
                    <li><a href="###">配送说明</a></li>
                    <li><a href="###">运费说明</a></li>
                    <li><a href="###">验货签收</a></li>
                    <li><a href="###">收货样品</a></li>
                </ul>
                <ul>
                    <li><a href="###">售后服务</a></li>
                    <li><a href="###">退换货政策</a></li>
                    <li><a href="###">退换货流程</a></li>
                    <li><a href="###">投诉与建议</a></li>
                    <li><a href="###">在线客服</a></li>
                </ul>
                <ul>
                    <li><a href="###">APP常见问题</a></li>
                    <li><a href="###">iPhone版</a></li>
                    <li><a href="###">android版</a></li>
                    <li><a href="###">wep版</a></li>
                    <li><a href="###">IPD版</a></li>
                </ul>
            </div>
            <div class="bottom">
                <div>
                    <span>DIANZI</span>
                    <span>新力传媒</span>
                    <span>联系我们</span>
                    <span>商家入驻</span>
                    <span>隐私条款</span>
                    <span>友情链接</span>
                    <span>潮流品牌大全</span>
                    <span>潮流品类大全</span>
                </div>
                <p>
                    苏公网安备32010502010132号|营
                    许可证苏B2-2323227327|食品许可证
                </p>
                <p>
                    CcopypRight e 2007-2021南京新与力文化传播有限公司苏CP备001125号 NewPower Co.版权所有
                </p>
                <p>
                    江苏省南京市建邺区嘉棱江东街18号南京国家广告产业园5栋17,18楼Q25-3T78100
                </p>

            </div>
        </div>
    </div>

</body>

</html>
<script src="./index.js"></script>